<template>
    <el-main>
                <div class="block">
                    <span class="demonstration">月</span>
                    <el-date-picker v-model="value1" type="month" placeholder="选择月" @change="getTime" value-format="yyyy-MM">
                    </el-date-picker>
                </div>
                <div>
                    <el-button round @click="selectByMonth">查询</el-button>
                </div>
                <el-table :data="invoices">
                    <el-table-column label="日期" width="140" prop="invoiceDate"></el-table-column>
                    <el-table-column label="上传日期" width="140" prop="uploadTime"></el-table-column>
                    <el-table-column label="发票代码" width="140" prop="invoiceCode"></el-table-column>
                    <el-table-column label="发票号码" width="140" prop="invoiceNum"></el-table-column>
                    <el-table-column label="校验码" width="140" prop="validate"></el-table-column>
                    <el-table-column label="总金额" width="140" prop="totalAmount"></el-table-column>
                    <el-table-column label="发票提供商" prop="invoiceName"></el-table-column>
                </el-table>
            </el-main>
</template>
  
<style>
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>
<script>
export default {
    name: 'Month',
    data() {
        return {
            user: {},
            value1:"",
            invoices:[]
        }
    },
    methods: {
        toUpload() {
            this.$router.push({ path: "/upload" })
        },
        toMonth() {
            this.$router.push({ path: '/month' })
        },
        toSum() {
            this.$router.push({ path: '/sum' })
        },
        toMain() {
            this.$router.push({ path: '/main' })
        },
        logout() {
            console.log("logout");
            this.$axios({
                method: "get",
                url: "/user/out",
                headers: {
                    token: sessionStorage.getItem("token"),
                },
            }).then((res) => {
                if (res.data.code == 0) {
                    sessionStorage.clear();
                    this.$router.replace({ path: "/" });
                }
            });
        },
        getUser() {
      this.$axios({
        method: "get",
        url: "/user/get",
        headers: {
          token: sessionStorage.getItem("token")
        }
      }).then(res => {
        if (res.data.code == 0) {
          this.user = res.data.data;
        }
      });
    },
        getTime(){
            console.log(this.value1);
        },
        selectByMonth(){
            this.$axios({
                method: "get",
                url: '/invoice/select/month/' + this.value1,
                headers:{
                    token: sessionStorage.getItem("token")
                }
            }).then((res) =>{
                if(res.data.code == 0){
                    this.invoices = res.data.data
                }
            })
        }
    },
    mounted() {
        this.getUser();
    }
}
</script>